<template>
  <div v-show="props.compType === 'dialogList'" class="dialogList">
    <el-collapse v-model="activePanel" accordion>
      <el-collapse-item title="基础设置" name="1">
        <el-form-item label="ID">
          <el-tooltip
            class="item"
            effect="dark"
            content="请注意,ID的修改可能会导致该组件相关事件失效！"
            placement="left"
          >
            <el-input class="input" v-model="props.id"></el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="标题">
          <el-input class="input" v-model="props.label"></el-input>
        </el-form-item>
        <el-form-item label="栅格">
          <el-input-number v-model="props.span" :min="1" :max="24" />
        </el-form-item>
        <el-form-item label="标签宽度">
          <el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
        </el-form-item>
        <el-form-item label="显示标签">
          <el-switch v-model="props.showLabel"></el-switch>
        </el-form-item>
        <el-form-item label="必填">
          <el-switch v-model="props.required"></el-switch>
        </el-form-item>
        <el-form-item label="禁用">
          <el-switch v-model="props.disabled"></el-switch>
        </el-form-item>
        <el-form-item label="默认值">
          <el-input class="input" v-model="props.modelValue"></el-input>
        </el-form-item>
        <el-form-item label="请求地址">
          <el-input v-model="props.action"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="props.title"></el-input>
        </el-form-item>
        <el-form-item label="多选">
          <el-switch v-model="props.multi"></el-switch>
        </el-form-item>
        <el-form-item label="显示序号">
          <el-switch v-model="props.showIndex"></el-switch>
        </el-form-item>
        <el-form-item label="表格高度">
          <el-input-number
            v-model="props.height"
            :step="10"
            :max="1500"
            :min="100"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="字段值">
          <el-input v-model="props.dval"></el-input>
        </el-form-item>
        <el-form-item label="字段名称">
          <el-input v-model="props.dlabel"></el-input>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="字段配置" name="2">
        <el-table :data="colOptions" @row-dblclick="handlerDeleteRow">
          <el-table-column property="label" label="字段" align="center" />
          <el-table-column property="property" label="属性" align="center" />
          <el-table-column property="width" label="宽度" align="center" width="70" />
          <el-table-column label="显示"></el-table-column>
        </el-table>
        <br />
        <el-alert
          title="字段和属性不能为空,请检查"
          v-show="alertShow"
          type="error"
          :closable="false"
        />
        <el-alert
          title="属性已存在请检查"
          v-show="propertyExistShow"
          type="error"
          :closable="false"
        />
        <br />
        <el-form-item label="字段" label-width="60px">
          <el-input v-model="dLabel" />
        </el-form-item>
        <el-form-item label="属性" label-width="60px">
          <el-input v-model="dProperty" />
        </el-form-item>
        <el-form-item label="宽度" label-width="60px">
          <el-input-number v-model="dWidth" />
        </el-form-item>
        <el-form-item label="显示" label-width="60px">
          <el-switch v-model="dShow" />
        </el-form-item>
        <div style="margin-left: 20px">
          <el-button
            style="padding-bottom: 0"
            icon="el-icon-circle-plus-outline"
            link
            @click="addColItem"
          >
            添加选项
          </el-button>
        </div>
      </el-collapse-item>
      <el-collapse-item title="数值联动" name="3"></el-collapse-item>
    </el-collapse>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch, onMounted } from 'vue';

export default defineComponent({
  name: 'text-config',
  
  props: {
    props: {
      type: Object,
      required: true
    }
  },

  setup(props) {
    // 响应式状态
    const activePanel = ref<string>('1');
    const colOptions = ref<any[]>([]);
    const dLabel = ref<string>('');
    const dProperty = ref<string>('');
    const dWidth = ref<number>(150);
    const dShow = ref<boolean>(true);
    const alertShow = ref<boolean>(false);
    const propertyExistShow = ref<boolean>(false);

    // 方法
    const addColItem = () => {
      if (dLabel.value !== '' && dProperty.value !== '') {
        const existOptions = colOptions.value.find((item) => item.property === dProperty.value);
        if (typeof existOptions === 'undefined') {
          alertShow.value = false;
          propertyExistShow.value = false;
          const obj: any = {
            index: colOptions.value.length,
            show: dShow.value,
            label: dLabel.value,
            property: dProperty.value,
            width: dWidth.value
          };
          colOptions.value.push(obj);
          resetFields();
        } else {
          propertyExistShow.value = true;
        }
      } else {
        alertShow.value = true;
      }
    };

    const resetFields = () => {
      dLabel.value = '';
      dProperty.value = '';
      dWidth.value = 150;
      dShow.value = true;
    };

    const handlerDeleteRow = (row: any) => {
      const index = colOptions.value.findIndex((item: any) => item.property == row.property);
      colOptions.value.splice(index, 1);
    };

    // 生命周期
    onMounted(() => {
      colOptions.value = colOptions.value.concat(JSON.parse(props.props.colConf));
    });

    // 监听器
    watch(colOptions, (newVal) => {
      props.props.colConf = JSON.stringify(newVal);
    }, { deep: true });

    // 暴露给模板
    return {
      activePanel,
      colOptions,
      dLabel,
      dProperty,
      dWidth,
      dShow,
      alertShow,
      propertyExistShow,
      addColItem,
      resetFields,
      handlerDeleteRow
    };
  }
});
</script>
<style scoped>
.dialogList :deep(.el-collapse-item__header) {
  background-color: #f4f6fc;
  padding-left: 10px;
}

.dialogList :deep(.el-collapse-item__header) {
  height: 35px;
}
</style>
